<template>
  <!-- 父子组件传值 -->
   <waterFallVue :list="list" :title="name"></waterFallVue>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import waterFallVue from './components/water-fall.vue'
let name = "inzv"

const getName = (name: any)=>{
  console.log(name,"父组件");
  
}
const list = [
  {
    height:300,
    background:'red'
  },
  {
    height:400,
    background:'pink'
  },
  {
    height:400,
    background:'blue'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:300,
    background:'red'
  },
  {
    height:400,
    background:'pink'
  },
  {
    height:400,
    background:'blue'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:300,
    background:'red'
  },
  {
    height:400,
    background:'pink'
  },
  {
    height:400,
    background:'blue'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
  {
    height:500,
    background:'yellow'
  },
  {
    height:200,
    background:'green'
  },
  {
    height:300,
    background:'grey'
  },
  {
    height:400,
    background:'black'
  },
  {
    height:100,
    background:'#9d6c66'
  },
]
const waterFall = ref<InstanceType<typeof waterFallVue>>()
  // 接受defineExpose
// onMounted(() => {
//  console.log(waterFall.value?.name);
// });
  


</script>

<style lang="less">
 html,body,#app{
   height: 100%;
   overflow: auto;
 }
</style>